<template>
    <p :class="{ 'active': isActive, 'text-danger': hasError }">Class样式绑定</p>
    <p :class="classObject">Class对象绑定2</p>
    <p :class="[arrayIsActive, arrayTextDanger]">Class样式绑定3</p>
    <p :class="[isActive?'active text-danger':'']">Class样式绑定4：三元运算</p>
    <p :class="[isActive?'active':'', {'text-danger':hasError}]">Class样式绑定5：数组嵌套对象，不能对象嵌套数组</p>
</template>
<script>
export default {
    data() {
        return {
            isActive: true,
            hasError: true,
            classObject:{
                'active':true,
                'text-danger':true,
            },
            arrayIsActive:'active',
            arrayTextDanger:'text-danger',
        }
    },
    methods: {

    }
}

</script>
<style type="text/css">
.active {
    color: red;
}
.text-danger {
    font-size: 40px;
}
</style>